<template>
	<view class="order-manage">
		<NavBar title="订单管理" right="search" @rightTap="search"/>
		<SwitchTab ref="switchTabRef" :arr="orderArr" @tapSwitch="switchTap" :p_top="44" />
		<view class="content" v-if="orderList.length">
			<OrderItem 
				:goodsInfo="item" 
				:index="index" 
				v-for="(item, index) in orderList" 
				:key="item" 
				@delOrder="delOrder"
				@cancelOrder="cancelOrder"
			/>
		</view>
		<Empty txt="暂没有订单~" btnText="去购物" @tapBtn="goHome" v-else/>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	import OrderItem from './components/Item.vue';
	import NavBar from '@/components/NavBar.vue';
	import SwitchTab from '@/components/SwitchTab.vue'
	import Empty from '@/components/Empty.vue'
	import { orderArr } from '@/utils/switchBar.js'
	import { GetOrderListApi } from '@/service/index.js'
	const switchTabRef = ref()
	const page = ref(1)
	const total = ref() // 订单总数
	const status = ref('-1') // 订单状态
	const pageSize = ref(10)
	const orderList = ref([]) // 订单列表
	const searchVal = ref('')
	const getOrderList = () => {
		let params = {
			page: page.value,
			page_size: pageSize.value,
			status: status.value,
			filters: {
				search: searchVal.value
			}
		}
		GetOrderListApi(params).then(res => {
			res.data.forEach(item => {
				item.item.forEach(child => {
					child.thumb_url = child.thumb
				})
			})
			orderList.value.push(...res.data)
			total.value = res.total
		})
	}
	const search = (e) => {
		searchVal.value = e
		page.value = 1
		orderList.value = []
		getOrderList()
	}
	
	// 删除订单
	const delOrder = (i) => {
		orderList.value.splice(i, 1)
	}
	// 取消订单
	const cancelOrder = (i) => {
		if(status.value ==0) return orderList.value.splice(i, 1)
		orderList.value[i].status = -1
	}
	const switchTap = (e) => {
		if(status.value == e) return
		page.value = 1
		orderList.value = []
		status.value = e
		getOrderList()
	}
  const goHome = () => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
	onLoad((e) => {
		const { orderStatus } = e
		status.value = orderStatus
		setTimeout(() => {
			switchTabRef.value.switchIndex = orderStatus
		})
		// getOrderList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value >= total.value) return
		page.value = page.value + 1
		getOrderList()
	})
	onShow(() => {
		page.value = 1
		orderList.value = []
		getOrderList()
	})
</script>

<style lang="scss" scoped>
	.order-manage {
		width: 100%;
		// padding: 2px 12px;
		box-sizing: border-box;
		white-space: nowrap;
		.switch {
			width: 100%;
			height: 38px;
			line-height: 38px;
			.item {
				display: inline-block;
				margin-left: 27px;
				font-weight: 400;
				font-size: 14px;
				color: #555555;
				line-height: 16px;
				&:nth-of-type(1) {
					margin-left: 0;
				}
				&.a-item {
					position: relative;
					font-weight: bold;
					font-size: 16px;
					color: #FF3B1E;
					&::before {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: -6px;
						display: block;
						content: '';
						width: 26px;
						height: 4px;
						background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
						border-radius: 33px;
					}
				}
			}
		}
		.content {
			padding: 10px 12px;
		}
	}
</style>
